<template>
  <div class="boxnav" ref="echart" :style="{ height: height + 'px' }"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import { getCurrentInstance, onMounted, reactive, watch } from 'vue';


// 基于准备好的dom，初始化echarts实例
let that = getCurrentInstance()
//接收父元素的option数据
let props = defineProps({
  option: {
    type: Object,
    default: {}
  },
  height: {
    type: Number,
    default: 180
  },
})
let myChart = null
//option就是表格的数据参数和样式，不同的option，表格不同
let option = props.option
watch(option, (newV) => {
  myChart.setOption(newV);
})

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(that.refs.echart);
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})

</script>